<template>
  <div class="container">
    <!-- 顶部状态信息 -->
    <div class="status-bar">
      <div class="shop-name">{{ shopData.name }}</div>
      <div class="status-time">{{ shopData.businessStatus }} · {{ shopData.businessHours }}</div>
      <div class="current-status">{{ shopData.businessStatus }}</div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="content">
      <!-- 店铺头像上传 -->
      <div class="section">
        <div class="section-header">
          <span>店铺头像</span>
          <button class="edit-btn" @click="showAvatarModal = true">修改</button>
        </div>
        <div class="section-content">
          <div class="avatar-upload">
            <div v-if="avatarUrl" class="avatar-preview">
                <img :src="avatarUrl" alt="头像" class="avatar-image">
            </div>
            <div v-else class="avatar-placeholder">
                暂无头像
            </div>
            <div class="avatar-info">
              <div>建议尺寸：200×200像素</div>
              <div>支持 JPG、PNG 格式，大小不超过 2MB</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 营业状态设置 -->
      <div class="section">
        <div class="section-header">营业状态</div>
        <div class="section-content">
          <div class="status-buttons">
            <button 
              class="status-btn" 
              :class="{ active: shopData.businessStatus === '营业中' }"
              @click="changeBusinessStatus('营业中')"
            >
              营业中
            </button>
            <button 
              class="status-btn" 
              :class="{ active: shopData.businessStatus === '休息中' }"
              @click="changeBusinessStatus('休息中')"
            >
              休息中
            </button>
            <button 
              class="status-btn" 
              :class="{ active: shopData.businessStatus === '手动打烊' }"
              @click="changeBusinessStatus('手动打烊')"
            >
              手动打烊
            </button>
          </div>
        </div>
      </div>
      
      <!-- 联系信息 -->
      <div class="section">
        <div class="info-row">
          <span class="info-label">联系电话</span>
          <span class="info-value">{{ shopData.phone }}</span>
          <button class="edit-btn" @click="showPhoneModal = true">修改</button>
        </div>
      </div>
      
      <!-- 店铺公告/简介 -->
      <div class="section">
        <div class="section-header">
          <span>公告/简介</span>
          <button class="edit-btn intro-edit-btn" @click="showIntroModal = true">编辑</button>
        </div>
        <div class="section-content">
          <div>{{ shopData.intro }}</div>
        </div>
      </div>
      
      <!-- 营业时间设置 -->
      <div class="section">
        <div class="section-header">
          <span>营业时间</span>
          <button class="edit-btn" @click="showTimeModal = true">修改</button>
        </div>
        <div class="section-content">
          <div class="info-row">
            <span class="info-value">{{ shopData.businessHours }}</span>
          </div>
        </div>
      </div>
      
      <!-- 配送范围设置 -->
      <div class="section">
        <div class="section-header">
          <span>配送范围</span>
          <button class="edit-btn" @click="showAreaModal = true">修改</button>
        </div>
        <div class="section-content">
          <div class="delivery-map">地图区域 - 显示配送范围</div>
          <div>当前配送范围：{{ shopData.deliveryArea }}</div>
        </div>
      </div>
      
      <!-- 配送设置 -->
      <div class="section">
        <div class="section-header">配送设置</div>
        <div class="section-content">
          <div class="delivery-option">
            <span class="option-label">配送服务</span>
            <div class="delivery-toggle-buttons">
              <button 
                class="delivery-toggle-btn" 
                :class="{ active: deliveryEnabled }"
                @click="deliveryEnabled = true"
              >
                开启
              </button>
              <button 
                class="delivery-toggle-btn" 
                :class="{ active: !deliveryEnabled }"
                @click="deliveryEnabled = false"
              >
                关闭
              </button>
            </div>
          </div>
          <div class="delivery-option">
            <span class="option-label">配送费</span>
            <span class="option-value">{{ shopData.deliveryFee }}元</span>
            <button class="edit-btn" :class="{ disabled: !deliveryEnabled }" @click="showFeeModal = true">修改</button>
          </div>
          <div class="delivery-option">
            <span class="option-label">起送价</span>
            <span class="option-value">{{ shopData.minOrder }}元</span>
            <button class="edit-btn" :class="{ disabled: !deliveryEnabled }" @click="showMinOrderModal = true">修改</button>
          </div>
          <div class="delivery-option">
            <span class="option-label">配送时间</span>
            <span class="option-value">{{ shopData.deliveryTime }}分钟</span>
            <button class="edit-btn" :class="{ disabled: !deliveryEnabled }" @click="showDeliveryTimeModal = true">修改</button>
          </div>
        </div>
      </div>
      
      <!-- 资质认证 -->
      <div class="section">
        <div class="section-header">资质认证</div>
        <div class="section-content">
          <div class="cert-item" v-for="cert in shopData.certifications" :key="cert.name">
            <span class="cert-name">{{ cert.name }}</span>
            <span class="cert-status">{{ cert.status }}</span>
            <button class="view-btn">查看</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
      <div class="nav-item" :class="{ active: activeNav === 'home' }" @click="setActiveNav('home')">
        <div class="nav-icon">🏠</div>
        <div>首页</div>
      </div>
      <div class="nav-item" :class="{ active: activeNav === 'data' }" @click="setActiveNav('data')">
        <div class="nav-icon">📊</div>
        <div>数据</div>
      </div>
      <div class="nav-item" :class="{ active: activeNav === 'order' }" @click="setActiveNav('order')">
        <div class="nav-icon">📦</div>
        <div>订单</div>
      </div>
      <div class="nav-item" :class="{ active: activeNav === 'profile' }" @click="setActiveNav('profile')">
        <div class="nav-icon">👤</div>
        <div>我的</div>
      </div>
    </div>
  </div>
  
  <!-- 修改店铺头像模态框 -->
  <div v-if="showAvatarModal" class="modal" @click.self="closeModal">
    <div class="modal-content">
      <div class="modal-header">
        <span>修改店铺头像</span>
        <button class="edit-btn" @click="closeModal">×</button>
      </div>
      <div class="modal-body">
        <div class="avatar-upload-area">
          <div class="upload-preview">
            <div v-if="hasImage">显示图片</div>
            <div v-else class="upload-placeholder">
              <div class="upload-icon">📷</div>
              <div>点击选择图片</div>
            </div>
          </div>
          <input 
            type="file" 
            ref="avatarInput"
            accept="image/jpeg,image/png"
            @change="handleAvatarUpload"
            class="file-input"
          >
          <div class="upload-tips">
            <div>建议尺寸：200×200像素</div>
            <div>支持 JPG、PNG 格式，大小不超过 2MB</div>
          </div>
        </div>
      </div>
      <div class="form-actions">
        <button class="btn btn-secondary" @click="closeModal">取消</button>
        <button class="btn btn-primary" @click="saveAvatar" :disabled="!avatarPreview">保存</button>
      </div>
    </div>
  </div>
  
  <!-- 修改联系电话模态框 -->
  <div v-if="showPhoneModal" class="modal" @click.self="closeModal">
    <div class="modal-content">
      <div class="modal-header">
        <span>修改联系电话</span>
        <button class="edit-btn" @click="closeModal">×</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">联系电话</label>
          <input 
            type="text" 
            class="form-input" 
            v-model="editData.phone"
            placeholder="请输入联系电话"
          >
        </div>
      </div>
      <div class="form-actions">
        <button class="btn btn-secondary" @click="closeModal">取消</button>
        <button class="btn btn-primary" @click="savePhone">保存</button>
      </div>
    </div>
  </div>
  
  <!-- 修改公告/简介模态框 -->
  <div v-if="showIntroModal" class="modal" @click.self="closeModal">
    <div class="modal-content">
      <div class="modal-header">
        <span>修改公告/简介</span>
        <button class="edit-btn" @click="closeModal">×</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">公告/简介</label>
          <textarea class="form-input" v-model="editData.intro" rows="4"></textarea>
        </div>
      </div>
      <div class="form-actions">
        <button class="btn btn-secondary" @click="closeModal">取消</button>
        <button class="btn btn-primary" @click="saveIntro">保存</button>
      </div>
    </div>
  </div>
  
  <!-- 修改营业时间模态框 -->
  <div v-if="showTimeModal" class="modal" @click.self="closeModal">
    <div class="modal-content">
      <div class="modal-header">
        <span>修改营业时间</span>
        <button class="edit-btn" @click="closeModal">×</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">开始时间</label>
          <div class="time-setter">
            <select class="time-select" v-model="editData.startTime">
              <option v-for="time in timeOptions" :key="'start-'+time" :value="time">{{ time }}</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">结束时间</label>
          <div class="time-setter">
            <select class="time-select" v-model="editData.endTime">
              <option v-for="time in timeOptions" :key="'end-'+time" :value="time">{{ time }}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="form-actions">
        <button class="btn btn-secondary" @click="closeModal">取消</button>
        <button class="btn btn-primary" @click="saveTime">保存</button>
      </div>
    </div>
  </div>
  
  <!-- 修改配送范围模态框 -->
  <div v-if="showAreaModal" class="modal" @click.self="closeModal">
    <div class="modal-content">
      <div class="modal-header">
        <span>修改配送范围</span>
        <button class="edit-btn" @click="closeModal">×</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">配送范围（公里）</label>
          <input 
            type="number" 
            class="form-input" 
            v-model="editData.area" 
            min="1" 
            max="20"
          >
        </div>
        <div class="delivery-map">地图区域 - 可调整配送范围</div>
      </div>
      <div class="form-actions">
        <button class="btn btn-secondary" @click="closeModal">取消</button>
        <button class="btn btn-primary" @click="saveArea">保存</button>
      </div>
    </div>
  </div>
  
  <!-- 修改配送费模态框 -->
  <div v-if="showFeeModal" class="modal" @click.self="closeModal">
    <div class="modal-content">
      <div class="modal-header">
        <span>修改配送费</span>
        <button class="edit-btn" @click="closeModal">×</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">配送费（元）</label>
          <input 
            type="number" 
            class="form-input" 
            v-model="editData.fee" 
            min="0" 
            step="0.5"
          >
        </div>
      </div>
      <div class="form-actions">
        <button class="btn btn-secondary" @click="closeModal">取消</button>
        <button class="btn btn-primary" @click="saveFee">保存</button>
      </div>
    </div>
  </div>
  
  <!-- 修改起送价模态框 -->
  <div v-if="showMinOrderModal" class="modal" @click.self="closeModal">
    <div class="modal-content">
      <div class="modal-header">
        <span>修改起送价</span>
        <button class="edit-btn" @click="closeModal">×</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">起送价（元）</label>
          <input type="number" class="form-input" v-model="editData.minOrder" min="0">
        </div>
      </div>
      <div class="form-actions">
        <button class="btn btn-secondary" @click="closeModal">取消</button>
        <button class="btn btn-primary" @click="saveMinOrder">保存</button>
      </div>
    </div>
  </div>
  
  <!-- 修改配送时间模态框 -->
  <div v-if="showDeliveryTimeModal" class="modal" @click.self="closeModal">
    <div class="modal-content">
      <div class="modal-header">
        <span>修改配送时间</span>
        <button class="edit-btn" @click="closeModal">×</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">最短配送时间（分钟）</label>
          <input type="number" class="form-input" v-model="editData.minDeliveryTime" min="10">
        </div>
        <div class="form-group">
          <label class="form-label">最长配送时间（分钟）</label>
          <input type="number" class="form-input" v-model="editData.maxDeliveryTime" min="20">
        </div>
      </div>
      <div class="form-actions">
        <button class="btn btn-secondary" @click="closeModal">取消</button>
        <button class="btn btn-primary" @click="saveDeliveryTime">保存</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShopManagement',
  data() {
    return {
      shopData: {
        name: "美味餐厅",
        phone: "138-0013-8000",
        intro: "本店提供美味健康的快餐食品，用心做好每一份餐品。",
        businessHours: "08:00 - 22:00",
        deliveryArea: "周边3公里内",
        deliveryFee: "5",
        minOrder: "20",
        deliveryTime: "30-50",
        businessStatus: "营业中",
        avatar: "",
        certifications: [
          { name: "营业执照", status: "已认证" },
          { name: "食品经营许可证", status: "已认证" }
        ]
      },
      deliveryEnabled: true,
      activeNav: 'home',
      editData: {
        phone: '',
        intro: '',
        startTime: '08:00',
        endTime: '22:00',
        area: 3,
        fee: 5,
        minOrder: 20,
        minDeliveryTime: 30,
        maxDeliveryTime: 50
      },
      avatarPreview: '',
      showAvatarModal: false,
      showPhoneModal: false,
      showIntroModal: false,
      showTimeModal: false,
      showAreaModal: false,
      showFeeModal: false,
      showMinOrderModal: false,
      showDeliveryTimeModal: false,
      timeOptions: []
    }
  },
  created() {
    this.generateTimeOptions();
    // 初始化编辑数据
    this.editData.phone = this.shopData.phone;
    this.editData.intro = this.shopData.intro;
  },
  methods: {
    generateTimeOptions() {
      const options = [];
      for (let hour = 0; hour < 24; hour++) {
        for (let minute = 0; minute < 60; minute += 30) {
          const timeString = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
          options.push(timeString);
        }
      }
      this.timeOptions = options;
    },
    changeBusinessStatus(status) {
      this.shopData.businessStatus = status;
    },
    closeModal() {
      this.showAvatarModal = false;
      this.showPhoneModal = false;
      this.showIntroModal = false;
      this.showTimeModal = false;
      this.showAreaModal = false;
      this.showFeeModal = false;
      this.showMinOrderModal = false;
      this.showDeliveryTimeModal = false;
      this.avatarPreview = '';
    },
    handleAvatarUpload(event) {
        const file = event.target.files[0];
        if (file) {
            // 检查文件大小（2MB限制）
            if (file.size > 2 * 1024 * 1024) {
                alert('文件大小不能超过2MB');
                return;
            }
            
            // 检查文件类型（修复后的代码）
            if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
                alert('请选择JPG或PNG格式的图片');
                return;
            }
            
            const reader = new FileReader();
            reader.onload = (e) => {
                this.avatarPreview = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    },
    saveAvatar() {
      if (this.avatarPreview) {
        this.shopData.avatar = this.avatarPreview;
        this.closeModal();
      }
    },
    savePhone() {
      this.shopData.phone = this.editData.phone;
      this.closeModal();
    },
    saveIntro() {
      this.shopData.intro = this.editData.intro;
      this.closeModal();
    },
    saveTime() {
      this.shopData.businessHours = `${this.editData.startTime} - ${this.editData.endTime}`;
      this.closeModal();
    },
    saveArea() {
      this.shopData.deliveryArea = `周边${this.editData.area}公里内`;
      this.closeModal();
    },
    saveFee() {
      this.shopData.deliveryFee = this.editData.fee.toString();
      this.closeModal();
    },
    saveMinOrder() {
      this.shopData.minOrder = this.editData.minOrder.toString();
      this.closeModal();
    },
    saveDeliveryTime() {
      this.shopData.deliveryTime = `${this.editData.minDeliveryTime}-${this.editData.maxDeliveryTime}`;
      this.closeModal();
    },
    setActiveNav(nav) {
      this.activeNav = nav;
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

body {
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.5;
}

.container {
  width: 100%;
  max-width: 90%;
  margin: 0 auto;
  background-color: white;
  min-height: 100vh;
  box-shadow: 0 0 1% rgba(0, 0, 0, 0.05);
  padding-bottom: 10%;
}

.status-bar {
  background: linear-gradient(135deg, #4a90e2, #357abd);
  color: white;
  padding: 4% 3%;
  position: relative;
}

.shop-name {
  font-size: 4vw;
  font-weight: bold;
  margin-bottom: 1%;
}

.status-time {
  font-size: 2.8vw;
  opacity: 0.9;
}

.current-status {
  position: absolute;
  right: 3%;
  top: 4%;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.8% 2%;
  border-radius: 2.4%;
  font-size: 2.4vw;
}

.content {
  padding: 3%;
  padding-bottom: 14%;
}

.section {
  background: white;
  border-radius: 1.6%;
  margin-bottom: 3%;
  box-shadow: 0 0.2% 0.6% rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.section-header {
  padding: 3%;
  border-bottom: 0.2% solid #f0f0f0;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 3.2vw;
}

.section-content {
  padding: 3%;
}

.status-buttons {
  display: flex;
  gap: 2%;
}

.status-btn {
  flex: 1;
  padding: 1.5% 2%;
  border: 0.2% solid #4a90e2;
  border-radius: 0.8%;
  background: white;
  color: #4a90e2;
  font-size: 2.6vw;
  cursor: pointer;
  transition: all 0.3s;
  height: 8vw;
}

.status-btn.active {
  background: #4a90e2;
  color: white;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.5% 0;
  min-height: 10vw;
}

.info-label {
  color: #666;
  font-size: 2.8vw;
  flex: 1;
}

.info-value {
  font-size: 2.8vw;
  flex: 2;
  text-align: right;
  padding-right: 3%;
}

.edit-btn {
  color: #4a90e2;
  background: none;
  border: none;
  font-size: 2.6vw;
  cursor: pointer;
  padding: 1.2% 2%;
  border-radius: 0.8%;
  transition: background-color 0.3s;
  height: 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-btn:hover {
  background-color: #f0f7ff;
}

.edit-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.intro-edit-btn {
  width: 14%;
  height: 6vw;
  font-size: 2.8vw;
  padding: 1.2% 2%;
}

.cert-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.4% 0;
  border-bottom: 0.2% solid #f0f0f0;
  min-height: 10vw;
}

.cert-item:last-child {
  border-bottom: none;
}

.cert-name {
  font-size: 2.8vw;
}

.cert-status {
  color: #52c41a;
  font-size: 2.4vw;
}

.view-btn {
  color: #4a90e2;
  background: none;
  border: none;
  font-size: 2.4vw;
  cursor: pointer;
  padding: 1% 2%;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 90%;
  margin: 0 auto;
  background: white;
  display: flex;
  justify-content: space-around;
  padding: 1.6% 0;
  border-top: 0.2% solid #f0f0f0;
  z-index: 100;
  height: 12%;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 2vw;
  color: #999;
  cursor: pointer;
  flex: 1;
}

.nav-item.active {
  color: #4a90e2;
}

.nav-icon {
  font-size: 4vw;
  margin-bottom: 0.4%;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  width: 90%;
  max-width: 80%;
  border-radius: 1.6%;
  padding: 4%;
  box-shadow: 0 1% 3% rgba(0, 0, 0, 0.2);
}

.modal-header {
  font-size: 3.6vw;
  font-weight: bold;
  margin-bottom: 3%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-body {
  margin-bottom: 4%;
}

.form-group {
  margin-bottom: 3%;
}

.form-label {
  display: block;
  margin-bottom: 1%;
  font-size: 2.8vw;
  color: #666;
}

.form-input {
  width: 100%;
  padding: 2.5%;
  border: 0.2% solid #ddd;
  border-radius: 0.8%;
  font-size: 2.8vw;
  height: 9vw;
}

.form-input:focus {
  border-color: #4a90e2;
  outline: none;
  box-shadow: 0 0 0 0.4% rgba(74, 144, 226, 0.2);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 2%;
}

.btn {
  padding: 1.6% 3%;
  border: none;
  border-radius: 0.8%;
  cursor: pointer;
  font-size: 2.6vw;
  height: 8vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  background: #4a90e2;
  color: white;
}

.btn-secondary {
  background: #f0f0f0;
  color: #333;
}

.delivery-map {
  height: 30vw;
  background: #f0f0f0;
  border-radius: 0.8%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  margin-bottom: 3%;
  font-size: 2.8vw;
}

.time-setter {
  display: flex;
  align-items: center;
  gap: 2%;
}

.time-select {
  flex: 1;
  padding: 2.5%;
  border: 0.2% solid #ddd;
  border-radius: 0.8%;
  font-size: 2.8vw;
  height: 9vw;
  background-color: white;
}

.delivery-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.5% 0;
  border-bottom: 0.2% solid #f0f0f0;
  min-height: 10vw;
}

.delivery-option:last-child {
  border-bottom: none;
}

.option-label {
  font-size: 2.8vw;
  flex: 1;
}

.option-value {
  font-size: 2.8vw;
  color: #666;
  flex: 1;
  text-align: right;
  padding-right: 3%;
}

.delivery-toggle-buttons {
  display: flex;
  gap: 2%;
  flex: 1;
  justify-content: flex-end;
}

.delivery-toggle-btn {
  padding: 1% 8%;
  border: 0.2% solid #4a90e2;
  border-radius: 0.8%;
  background: white;
  color: #4a90e2;
  font-size: 2.6vw;
  cursor: pointer;
  transition: all 0.3s;
  height: 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delivery-toggle-btn.active {
  background: #4a90e2;
  color: white;
}

/* 头像上传样式 */
.avatar-upload {
  display: flex;
  align-items: center;
  gap: 4%;
}

.avatar-preview {
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  color: #999;
  font-size: 2.8vw;
}

.avatar-info {
  flex: 1;
  font-size: 2.6vw;
  color: #666;
  line-height: 1.4;
}

.avatar-upload-area {
  text-align: center;
}

.upload-preview {
  width: 30vw;
  height: 30vw;
  margin: 0 auto 3%;
  border: 0.2% dashed #ddd;
  border-radius: 1.6%;
  overflow: hidden;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-placeholder {
  color: #999;
  font-size: 2.8vw;
}

.upload-icon {
  font-size: 8vw;
  margin-bottom: 2%;
}

.file-input {
  display: none;
}

.upload-tips {
  font-size: 2.6vw;
  color: #666;
  line-height: 1.4;
  margin-top: 3%;
}

@media (min-width: 768px) {
  .container {
    max-width: 70%;
  }
  
  .shop-name {
    font-size: 2.5vw;
  }
  
  .status-time {
    font-size: 1.8vw;
  }
  
  .current-status {
    font-size: 1.5vw;
  }
  
  .status-btn {
    font-size: 1.6vw;
    height: 5vw;
    padding: 1% 1.5%;
  }
  
  .info-label, .info-value, .edit-btn {
    font-size: 1.8vw;
  }
  
  .edit-btn {
    height: 4vw;
    padding: 0.8% 1.5%;
  }
  
  .cert-name {
    font-size: 1.8vw;
  }
  
  .cert-status, .view-btn {
    font-size: 1.5vw;
  }
  
  .nav-item {
    font-size: 1.3vw;
  }
  
  .nav-icon {
    font-size: 2.3vw;
  }
  
  .modal-header {
    font-size: 2.3vw;
  }
  
  .form-label, .form-input, .btn {
    font-size: 1.8vw;
  }
  
  .btn {
    height: 5vw;
  }
  
  .form-input {
    height: 5vw;
  }
  
  .option-label, .option-value {
    font-size: 1.8vw;
  }
  
  .delivery-toggle-btn {
    font-size: 1.6vw;
    height: 4vw;
    padding: 0.5% 6%;
  }
  
  .avatar-preview {
    width: 12vw;
    height: 12vw;
  }
  
  .avatar-info {
    font-size: 1.6vw;
  }
  
  .upload-preview {
    width: 18vw;
    height: 18vw;
  }
  
  .upload-tips {
    font-size: 1.6vw;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 50%;
  }
  
  .shop-name {
    font-size: 1.8vw;
  }
  
  .status-time {
    font-size: 1.3vw;
  }
  
  .current-status {
    font-size: 1.1vw;
  }
  
  .status-btn {
    font-size: 1.2vw;
    height: 3.5vw;
    padding: 0.8% 1.2%;
  }
  
  .info-label, .info-value, .edit-btn {
    font-size: 1.3vw;
  }
  
  .edit-btn {
    height: 3vw;
    padding: 0.6% 1.2%;
  }
  
  .cert-name {
    font-size: 1.3vw;
  }
  
  .cert-status, .view-btn {
    font-size: 1.1vw;
  }
  
  .nav-item {
    font-size: 0.9vw;
  }
  
  .nav-icon {
    font-size: 1.6vw;
  }
  
  .modal-header {
    font-size: 1.6vw;
  }
  
  .form-label, .form-input, .btn {
    font-size: 1.3vw;
  }
  
  .btn {
    height: 3.5vw;
  }
  
  .form-input {
    height: 3.5vw;
  }
  
  .option-label, .option-value {
    font-size: 1.3vw;
  }
  
  .delivery-toggle-btn {
    font-size: 1.2vw;
    height: 3vw;
    padding: 0.4% 5%;
  }
  
  .avatar-preview {
    width: 8vw;
    height: 8vw;
  }
  
  .avatar-info {
    font-size: 1.2vw;
  }
  
  .upload-preview {
    width: 12vw;
    height: 12vw;
  }
  
  .upload-tips {
    font-size: 1.2vw;
  }
}
</style>